<template>
  <div class="top-area">
    <div class="time">
      <div class="day">{{ day }}</div>
      <div class="min">{{ min }}</div>
    </div>
    <div class="title">智慧城市-武汉</div>

  </div>
</template>

<script setup>
import { ref, } from 'vue'
let day = ref()
let min = ref()

setInterval(() => {
  let data = new Date()
day.value = `${data.getFullYear()}-${data.getMonth()+1}-${data.getDate()}`
min.value = `${data.getHours()}:${data.getMinutes()<10?'0'+data.getMinutes():data.getMinutes()}:${data.getSeconds()<10?'0'+data.getSeconds():data.getSeconds()}`
},1000)

</script>

<style scoped lang="scss">
.top-area {
  position: fixed;
  z-index: 100;
  top: 0;
  width: 100%;
  height: 70px;
  color: #fff;
  padding: 10px;
  display: flex;
  background-image: url('/bcg-image/header.png');
  background-size: cover;
  background-position: center;
  .time {
    position: relative;
    width: 30%;
    top: 10px;
    left: 20px;
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
  }
  .title {
    position: relative;
    left: 14%;
    width: 70%;
    font-size: 25px;
    top: 6px;
    margin-top: -6px;
  }
}
</style>
